<template>
  <div class="l-echart-imgborder"
       :style="styleSizeName"
       @click="handleClick">
    <div :class="`animated ${animateValue}`" style="width:100%;height:100%">
        <dv-border-box-1 v-if="borderValue===1" :style="styleImgName" :key="key" :color="color" :dur="dur"></dv-border-box-1>
        <dv-border-box-2 v-if="borderValue===2" :style="styleImgName" :key="key" :color="color"></dv-border-box-2>
        <dv-border-box-3 v-if="borderValue===3" :style="styleImgName" :key="key" :color="color"></dv-border-box-3>
        <dv-border-box-4 v-if="borderValue===4" :style="styleImgName" :key="key" :color="color"></dv-border-box-4>
        <dv-border-box-5 v-if="borderValue===5" :style="styleImgName" :key="key" :color="color"></dv-border-box-5>
        <dv-border-box-6 v-if="borderValue===6" :style="styleImgName" :key="key" :color="color"></dv-border-box-6>
        <dv-border-box-7 v-if="borderValue===7" :style="styleImgName" :key="key" :color="color"></dv-border-box-7>
        <dv-border-box-8 v-if="borderValue===8" :style="styleImgName" :key="key" :color="color" :dur="dur"></dv-border-box-8>
        <dv-border-box-9 v-if="borderValue===9" :style="styleImgName" :key="key" :color="color"></dv-border-box-9>
        <dv-border-box-10 v-if="borderValue===10" :style="styleImgName" :key="key" :color="color"></dv-border-box-10>
        <dv-border-box-11 v-if="borderValue===11" :style="styleImgName" :key="key" :color="color" :title="title" :titleWidth="titleWidth"></dv-border-box-11>
        <dv-border-box-12 v-if="borderValue===12" :style="styleImgName" :key="key" :color="color"></dv-border-box-12>
    </div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
    mixins:[init],
    data() {
        return {
            key: false
        }
    },
    computed: {
        styleImgName () {
        return Object.assign({
            width: "100%",
            height: "100%",
            transitionProperty: 'all',
            backgroundColor: this.option.backgroundColor || "rgba(0,0,0,0)",
            opacity: this.option.opacity / 100,
            transform:`rotateX(${this.option.rotateX}deg) rotateY(${this.option.rotateY}deg) rotateZ(${this.option.rotateZ}deg) scale(${this.option.scale})`,
        })
        },
        color() {
            return [
                this.option.mainColor || 'rgba(131, 191, 246, 1)', this.option.subColor || 'rgba(0, 206, 209, 1)'
            ]
        },
        dur() {
            return this.option.duration - 0 || 3
        },
        title() {
            return this.option.title || ''
        },
        titleWidth() {
            return this.option.titleWidth - 0 || 250
        },
        borderValue: {
            get() {
                return this.option.borderValue
            },
            set() {},
        },
         animateValue: {
            get() {
                return this.option.animateValue
            },
            set() {},
        },
    },
    created() {
        if (!this.option.opacity) this.$set(this.option, 'opacity', 100)
    },
    methods: {
        handleClick () {
            this.clickFormatter && this.clickFormatter({
            // data: this.dataChart
            data: this.option
            }, this.getItemRefs());
        }
    }
};
</script>

